<template>
    <div class="ordering" v-loading.fullscreen.lock="Loading">
        <div class="heading">订单管理</div>
        <div class="query-view">
            <!-- 日期选择器 -->
            <div class="quotation-query">
                <div class="quotation-title">交易时间</div>
                <div class="block">
                    <el-date-picker v-model="timer" type="daterange" range-separator="到" start-placeholder="开始时间"
                        end-placeholder="结束时间" :size="size" value-format="YYYY-MM-DD" />
                </div>
            </div>
            <!-- 下拉列表 -->
            <div class="quotation-query">
                <div class="quotation-title">桌号</div>
                <div>
                    <el-select v-model="sevalue" class="m-2" placeholder="请选择桌号" size="large">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>
            <!-- 查询按钮 -->
            <div class="quotation-query">
                <el-button type="success" @click="queryFn">查询</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <div>
            <el-table :data="table_data" style="width: 100%">
                <el-table-column prop="order_time" label="交易时间" align="center" min-width="100" />
                <el-table-column prop="table_number" label="桌号" align="center" min-width="100" />
                <el-table-column prop="number_of_diners" label="用餐人数" align="center" min-width="100" />
                <el-table-column label="菜品详情" align="center" min-width="100">
                    <template #default="scope">
                        <el-button size='small' @click="detail(scope.$index,scope.row._id)"
                            :loading=" scope.$index === deta_load ? true : false">详细菜单</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="sett_amount" label="交易金额" align="center" min-width="100" />
                <el-table-column label="交易状态" align="center" min-width="100">
                    <template #default="scope">
                        <el-button size='small' v-if="scope.row.transac_status === 'success'" disabled type="danger">已结账
                        </el-button>
                        <el-button size='small' v-else type="danger">未结账</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div>
            <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentchange" />
        </div>
        <Dialog ref="dialog"></Dialog>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs, getCurrentInstance, ref } from 'vue'
import Dialog from './components/el-dialog.vue'
import qs from 'qs'
export default {
    components:{Dialog},
    setup () {
        let dialog = ref()
        const Loading = ref(true)
        const { proxy } = getCurrentInstance()
        const oper_data = reactive({
            timer:[],// 选中的时间
            sevalue:'',// 选中的桌号
            options: [], // 桌号数据 
            table_data: [],// 表格数据
            page:0, // 第一页数据
            total:0,// 数据总条数
            deta_load:-1
        })

        // 请求数据
        onMounted(()=>{
            getOrder()
        })

        async  function getOrder(){
            // 拼接
            const query = qs.stringify({
                page: oper_data.page,
                table_number: oper_data.sevalue,
                order_time: JSON.stringify(oper_data.timer)
            })
            try {
                const Tab = await new proxy.$request(proxy.$urls.m().gettable).modeget()
                const Ord = await new proxy.$request(proxy.$urls.m().obtainorder + '?' + query).modeget()
                const res = await Promise.all([Tab, Ord])
                // console.log(res);
                oper_data.options = res[0].data.data
                oper_data.table_data = res[1].data.data.result
                oper_data.total = res[1].data.data.total
                Loading.value = false
            } catch (error) {
                new proxy.$tips('服务器发生错误','error').mess_age()
            }
        }

        // 触发分页的函数
        function currentchange(e) {
            oper_data.page = e - 1
            getOrder()
        }
        // 点击详细菜单传值给子组件
        const detail = async(index,id) =>{
            oper_data.deta_load = index
            try {
                const res = await new proxy.$request(proxy.$urls.m().vieworder + '?id=' + id).modeget()
                // console.log(res);
                dialog.value.popup(res.data.data)
                oper_data.deta_load = -1
            } catch (error) {
                oper_data.deta_load = -1
            }
        }

        // 条件查询按钮
        function queryFn(){
            getOrder()
        }

        return { ...toRefs(oper_data), currentchange, detail, dialog, queryFn, Loading
}
    }
}
</script>

<style lang="scss" scoped>

</style>